{% extends "award_base.html" %}
{% load i18n %}
{% block head %}
    <title>{% trans "蓝鲸开发框架" %}</title>
    {{ block.super }}
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/select2-3.5.2/select2.css" rel="stylesheet">
{% endblock %}


{% block content %}
    <div class="page-content" style="min-width:80%;">
        <ol class="breadcrumb detail-breadcrumb">
            <li class="all pro-all"><span href="#index?catalogue=all&amp;tag=all">系统管理</span></li>
            <li><a href="{{ SITE_URL }}award">奖项信息</a></li>
            <li><span href="{{ SITE_URL }}batch_copy">批量克隆</span></li>
        </ol>
        <div>
            <input type="hidden" class="bk-form-input" id="search_award_name" value="{{ award_name }}">
            <input type="hidden" class="bk-form-input" id="search_org_name" value="{{ org_name }}">
            <input type="hidden" class="bk-form-input" id="search_status" value="{{ status }}">
            <input type="hidden" class="bk-form-input" id="search_apply_time" value="{{ apply_time }}">
        </div>
        <div class="bk-panel bk-demo">
            <div class="bk-panel-header">
                <div class="bk-form m15">
                    <div class="row">
                        <div class="col-md-8 col-lg-8 col-xs-8">
                            <div class="row">
                                <div class="col-md-2 col-lg-2 col-xs-2">
                                    <label class="bk-label">申报奖项：</label>
                                </div>
                                <div class="col-md-4 col-lg-4 col-xs-4">
                                    <input type="text" class="bk-form-input" id="old_award_name"
                                           placeholder="请输入替换前奖项名称">
                                </div>
                                <div class="col-md-2 col-lg-2 col-xs-2">
                                    <span>替换为</span>
                                </div>
                                <div class="col-md-4 col-lg-4 col-xs-4">
                                    <input type="text" class="bk-form-input" id="new_award_name"
                                           placeholder="请输入替换后奖项名称">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-8 col-lg-8 col-xs-8">
                            <div class="row">
                                <div class="col-md-2 col-lg-2 col-xs-2">
                                    <label class="bk-label">所属组织：</label>
                                </div>
                                <div class="col-md-10 col-lg-10 col-xs-10">
                                    <div class="plugin3_demo" id="plugin3_demo3" style="display:inline-block;">
                                        <!-- select2 通过ajax start -->
                                        <div class="select2-container select2_box select2-container-active"
                                             id="s2id_autogen5"
                                             style="width:418px;height: 36px">
                                            <a href="javascript:void(0)" class="select2-choice" tabindex="-1"><abbr
                                                    class="select2-search-choice-close"></abbr> <span
                                                    class="select2-arrow"
                                                    role="presentation"><b
                                                    role="presentation"></b></span></a>
                                            <label for="belonging_org" class="select2-offscreen"></label>
                                            <input class="select2-focusser select2-offscreen" type="text"
                                                   aria-haspopup="true"
                                                   role="button" aria-labelledby="select2-chosen-6">
                                        </div>
                                        <input type="hidden" class="select2_box bk-form-input"
                                               style="width: 280px; display: none;"
                                               tabindex="-1"
                                               title="" value="" id="belonging_org">
                                        <!-- select2 通过ajax end -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-8 col-lg-8 col-xs-8">
                            <div class="row">
                                <div class="col-md-2 col-lg-2 col-xs-2">
                                    <label class="bk-label">申报时间：</label>
                                </div>
                                <div class="col-md-4 col-lg-4 col-xs-4">
                                    <input type="text" class="bk-form-input daterangepicker_demo"
                                           id="start_datetime"
                                           placeholder="选择日期...">
                                </div>
                                <div class="col-md-2 col-lg-2 col-xs-2">
                                    <span>至</span>
                                </div>
                                <div class="col-md-4 col-lg-4 col-xs-4">
                                    <input type="text"
                                           class="bk-form-input daterangepicker_demo"
                                           id="end_datetime"
                                           placeholder="选择日期...">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bk-form-item">
                    <div class="bk-form-content">
                        <button class="bk-button bk-default" title="预览" onclick="watch()">预览</button>
                        <button class="bk-button bk-primary" title="查询" onclick="batchCopyData()">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="bk-panel-body p0">
            <table id="awardCopy" class="bk-table table-bordered">
                <thead>
                <tr>
                    <th>所属组织</th>
                    <th>奖项级别</th>
                    <th>申报奖项</th>
                    <th>替换后的申报奖项</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
{% endblock %}

{% block extra_block %}
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <!-- 平台 js  -->
    <script src="{{ REMOTE_STATIC_URL }}v3/bk/js/bk.js"></script>
    <!-- datatables js -->
    <script src="{{ STATIC_URL }}datatables-1.10.7/jquery.dataTables.js"></script>
    <script src="{{ STATIC_URL }}datatables-1.10.7/dataTables.bootstrap.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/moment.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/select2-3.5.2/select2.js"></script>

    <script type="text/javascript">

        //editor4_demo1_js_end
        $('#start_datetime').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD'
            },
            autoApply: false, //选择日期后自动设置值
            singleDatePicker: true, //单选选择一个日期
            autoUpdateInput: true
        });
        $('#start_datetime').val("")

        $('#end_datetime').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD'
            },
            autoApply: false, //选择日期后自动设置值
            singleDatePicker: true //单选选择一个日期
        });
        $('#end_datetime').val("")

        $("#plugin3_demo3 .select2_box").select2({
            ajax: {
                url: "{{ SITE_URL }}get_org_select_data",
                cache: false,
                //对返回的数据进行处理
                results: function (data) {
                    {#data.data.results.push({#}
                    {#    'id': -1,#}
                    {#    'text': "不限",#}
                    {# });#}
                    return data.data;
                }
            }

        });
        //表格(DataTables)
        var language = {
            search: "{% trans '搜索：' %}",
            lengthMenu: "{% trans '每页显示 _MENU_ 记录' %}",
            zeroRecords: "{% trans '没找到相应的数据！' %}",
            info: "{% trans '分页 _PAGE_ / _PAGES_ 共 _TOTAL_ 条' %}",
            infoEmpty: "{% trans '暂无数据！' %}",
            infoFiltered: "{% trans '(从 _MAX_ 条数据中搜索)' %}",
            paginate: {
                first: "{% trans '首页' %}",
                last: "{% trans '尾页' %}",
                previous: "{% trans '上一页' %}",
                next: "{% trans '下一页' %}",
            }
        }
        var awardCopyTable = $('#awardCopy').DataTable({
            sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">',//这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
            pagingType: "full_numbers",
            paging: true, //隐藏分页
            ordering: false, //关闭排序
            info: true, //隐藏左下角分页信息
            searching: false, //关闭搜索
            pageLength: 10, //每页显示几条数据
            lengthChange: false, //不允许用户改变表格每页显示的记录数
            language: language, //汉化
            serverSide: true,
            lengthMenu: [5, 10, 25, 50, 75, 100],
            ajax: {
                url: '{{SITE_URL}}get_award_copy_list/',
                method: "post",
                dataType: 'json',
                data: function (d) {
                    d.search_award_name = $('#search_award_name').val();
                    d.search_org_name = $('#search_org_name').val();
                    d.search_status = $('#search_status').val();
                    d.search_apply_time = $('#search_apply_time').val();

                    d.belonging_org = $('#s2id_autogen5').val();
                    d.new_award_name = $('#new_award_name').val();
                    d.old_award_name = $('#old_award_name').val();
                    d.start_time = $('#start_datetime').val() ? $('#start_datetime').val() + " 00:00:00" : "";
                    d.end_time = $('#end_datetime').val() ? $('#end_datetime').val() + " 23:59:59" : "";
                    d.csrfmiddlewaretoken = "{{ csrf_token }}";
                },
                dataSrc: function (json) {
                    json.draw = json.data.info.draw;
                    json.recordsTotal = json.data.info.recordsTotal;
                    json.recordsFiltered = json.data.info.recordsFiltered;
                    json.data = json.data.info.data

                    return json.data;
                },
            },
            columnDefs: [
                {
                    targets: 0,
                    data: "belonging_org",
                },
                {
                    targets: 1,
                    data: "award_level",
                },
                {
                    targets: 2,
                    data: "old_award_name",
                },
                {
                    targets: 3,
                    data: "new_award_name",
                },
                {
                    targets: 4,
                    data: "start_time",
                },
                {
                    targets: 5,
                    data: "end_time",
                }
            ]
        });

        function watch() {
            let start_datetime = $('#start_datetime').val() + " 00:00:00"
            let end_datetime = $('#end_datetime').val() + " 23:59:59"
            if (!$('#old_award_name').val()) {
                new bkMessage({
                    message: "请输入需要替换的奖项",
                    theme: 'error',
                    delay: 3000
                });
                return false
            }
            if (!$('#new_award_name').val()) {
                new bkMessage({
                    message: "请输入替换后的奖项",
                    theme: 'error',
                    delay: 3000
                });
                return false
            }
            if (!$('#s2id_autogen5').val()) {
                new bkMessage({
                    message: "请选择所属组织",
                    theme: 'error',
                    delay: 3000
                });
                return false
            }
            if (start_datetime >= end_datetime) {
                new bkMessage({
                    message: "结束日期不能小于起始日期",
                    theme: 'error',
                    delay: 3000
                });
                return false
            }
            awardCopyTable.ajax.reload(null, false);
        }

        function batchCopyData() {
            var rows = awardCopyTable.rows().data();

            let myArray = [];
            for (var i = 0; i < rows.length; i++) {
                myArray.push(rows[i]);
            }

            var dialog = new bkDialog({
                type: 'dialog',
                title: '批量克隆',
                content: '确认克隆数据？',
                confirmFn: function () {
                    $.ajax({
                        url: '{{ SITE_URL }}batch_copy_award_data/',
                        method: 'post',
                        dataType: "json",
                        data: {
                            "data": JSON.stringify(myArray),
                            'csrfmiddlewaretoken': "{{ csrf_token }}"
                        },

                        success: function (response) {
                            if (response['result']) {
                                new bkMessage({
                                    message: response['message'],
                                    theme: 'success'
                                })
                                $("#plugin3_demo3 .select2_box").select2("val", "")
                                $('#new_award_name').val("");
                                $('#old_award_name').val("");
                                $('#start_datetime').val("");
                                $('#end_datetime').val("");
                                window.location.href = "{{ SITE_URL }}award"
                            } else {
                                // 失败处理
                                new bkMessage({
                                    message: response['message'],
                                    theme: 'error',
                                    delay: 3000
                                });
                            }
                        }
                    })
                }
            });
            dialog.show();
        }
    </script>
{% endblock %}